<template>
  <div class="builder-container">

    <Tabs size="small">
      <TabPane label="基本配置">
        <Form :label-width="130">
          <FormItem label="标签">
            <Input size="small" v-model="obj.title" placeholder=""/>
          </FormItem>
          <FormItem label="字段名称">
            <Input size="small" v-model="obj.field" placeholder=""/>
          </FormItem>
          <!--<FormItem label="默认值">
            <Input size="small" v-model="obj.value" placeholder=""/>
          </FormItem>-->
          <FormItem label="组件尺寸">
            <Select :transfer="true" size="small" v-model="obj.props.size">
              <Option value="default">默认</Option>
              <Option value="small">小型</Option>
              <Option value="large">大型</Option>
            </Select>
          </FormItem>
          <FormItem label="显示清空按钮">
            <i-switch v-model="obj.props.clearable">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>
          <FormItem label="是否禁用状态">
            <i-switch v-model="obj.props.disabled">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>
          <FormItem label="是否只读状态">
            <i-switch v-model="obj.props.readonly">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>
          <FormItem label="是否可输入">
            <i-switch v-model="obj.props.editable">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>
          <FormItem label="选择类型">
            <Select :transfer="true" size="small" v-model="obj.props.type">
              <Option value="date">单个日期</Option>
              <Option value="daterange">范围日期</Option>
              <Option value="datetime">单个日期带时间</Option>
              <Option value="datetimerange">范围日期带时间</Option>
              <Option value="year">年份</Option>
              <Option value="month">月份</Option>
            </Select>
          </FormItem>
          <FormItem label="展示的日期格式">
            <Input size="small" v-model="obj.props.format" placeholder=""/>
          </FormItem>
          <FormItem label="显示底部控制栏">
            <i-switch v-model="obj.props.confirm">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
            <p class="color-red" style="line-height: 16px;">开启后，选择完日期，选择器不会主动关闭，需用户确认后才可关闭</p>
          </FormItem>

          <FormItem label="占位文本">
            <Input size="small" v-model="obj.props.placeholder" placeholder=""/>
          </FormItem>


          <FormItemPanel title="栅格布局配置">
            <FormItem label="栅格列数COL">
              <InputNumber size="small" :max="24" :min="1" v-model="obj.col.span"></InputNumber>
            </FormItem>
            <FormItem label="偏移数OFFSET">
              <InputNumber size="small" :max="24" :min="0" v-model="obj.col.offset"></InputNumber>
            </FormItem>
          </FormItemPanel>
        </Form>
      </TabPane>
      <TabPane label="校验规则">
        <CValidatePanel v-model="obj"></CValidatePanel>
      </TabPane>
      <!--<TabPane label="事件监听"></TabPane>-->
    </Tabs>

  </div>
</template>

<script>
  import '../CustomForm.css'

  export default {
    name: 'CDatePickerBuilder',
    props: {
      value: {
        type: Object
      }
    },
    data() {
      return {
        obj: this.value
      }
    },
    mounted() {

    },
    methods: {

    },
    computed: {

    },
    watch: {
      value (val) {
        this.obj = val;
      },
      obj (val) {
        this.$emit('input', val);
      }
    }
  }
</script>

<style lang="less" scoped>

</style>
